<template>
    <div id="app">
      <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />
  
      <!-- 显示接口返回的消息的模态框 -->
      <div v-if="showModal" class="modal-overlay" @click="hideModal">
        <div class="modal-content" @click.stop>
          <h2 class="modal-title">接口返回消息</h2>
          <div class="modal-body">
            <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
            <pre><strong>Response Data:</strong> {{ responseData }}</pre>
            <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
          </div>
          <button class="modal-close" @click="hideModal">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'; // 引入 axios 库
  
  // 表单数据
  const formData = ref({});
  // 表单 API 实例
  const formApi = ref(null);
  // 控制模态框的显示
  const showModal = ref(false);
  // 接口返回的消息
  const responseData = ref('');
  const statusCode = ref('');
  const errorMessage = ref('');
  
  // 表单规则
  const formRules = ref([
  {
    "type": "group",
    "field": "UPDATAITEM",
    "title": "采购订单修改",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "subForm",
          "field": "header",
          "title": "表头数据",
          "info": "",
          "$required": false,
          "props": {
            "rule": [
              {
                "type": "input",
                "field": "po_number",
                "title": "采购订单编号",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fcs3m0oy8cwgc5c",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "comp_code",
                "title": "公司代码",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fmx1m0oy8qzwc8c",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "vendor",
                "title": "供应商",
                "info": "",
                "$required": false,
                "_fc_id": "id_Ftqtm0oy9119cac",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "pur_group",
                "title": "采购组",
                "info": "",
                "$required": false,
                "_fc_id": "id_F25wm0oy9a2occc",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "doc_type",
                "title": "采购凭证类型",
                "info": "",
                "$required": false,
                "_fc_id": "id_F2apm0oy9jakcec",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "username_sap",
                "title": "创建人",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fwmwm0oy9tamcgc",
                "name": "ref_Fht4m0oy8cwgc6c",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              }
            ]
          },
          "_fc_id": "id_Ftx1m0oytu4ze6c",
          "name": "ref_Fjdzm0oytu4ze7c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "subForm"
        },
        {
          "type": "group",
          "field": "item",
          "title": "项目数据",
          "info": "",
          "$required": false,
          "props": {
            "rule": [
              {
                "type": "input",
                "field": "po_number",
                "title": "采购订单",
                "info": "",
                "$required": false,
                "_fc_id": "id_F6djm0oybl79cuc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "po_item",
                "title": "项目",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fjxum0oyc8vocwc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "comp_code",
                "title": "公司代码",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fjnom0oyamfrclc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "vendor",
                "title": "供应商",
                "info": "",
                "$required": false,
                "_fc_id": "id_Ftmjm0oyawygcoc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "pur_group",
                "title": "采购组",
                "info": "",
                "$required": false,
                "_fc_id": "id_F4lgm0oyb5pwcqc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "doc_type",
                "title": "凭证类型",
                "info": "",
                "$required": false,
                "_fc_id": "id_Ff3im0oybd98csc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "material",
                "title": "物料",
                "info": "",
                "$required": false,
                "_fc_id": "id_Ffz9m0oyg9z6cyc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "short_text",
                "title": "物料描述",
                "info": "",
                "$required": false,
                "_fc_id": "id_F5ikm0oyghmcd0c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "quantity",
                "title": "采购订单数量",
                "info": "",
                "$required": false,
                "_fc_id": "id_F894m0oygrgzd2c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "po_unit",
                "title": "订单单位",
                "info": "",
                "$required": false,
                "_fc_id": "id_F58km0oyh4wvd4c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "free_item",
                "title": "免费项目",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fzz7m0oyhf9pd6c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "matl_group",
                "title": "物料组",
                "info": "",
                "$required": false,
                "_fc_id": "id_F236m0oyhomvd8c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "plant",
                "title": "工厂",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fsw2m0oyhyqcdac",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "stge_loc",
                "title": "库存地点",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fnx3m0oyi7j8dcc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "preq_no",
                "title": "采购申请",
                "info": "",
                "$required": false,
                "_fc_id": "id_Faxrm0oyig5gdec",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "preq_item",
                "title": "采购申请项目",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fzsum0oyiodadgc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "tax_code",
                "title": "税码",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fi4am0oyixtgdic",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "item_cat",
                "title": "采购项目类别",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fkvsm0oyj61gdkc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "acctasscat",
                "title": "科目分配",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fu41m0oyjf9vdmc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "currency",
                "title": "货币码",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fwkhm0oyjnladoc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "cond_value",
                "title": "净价",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fsehm0oyjwgsdqc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "delivery_date",
                "title": "项目交货日期",
                "info": "",
                "$required": false,
                "_fc_id": "id_F9jpm0oyk498dsc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "cond_p_unt",
                "title": "价格单位",
                "info": "",
                "$required": false,
                "_fc_id": "id_F4exm0oyke53duc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "delete_ind",
                "title": "删除标识",
                "info": "",
                "$required": false,
                "_fc_id": "id_F2rbm0oykm9odwc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "unloadingPoint",
                "title": "卸货点",
                "info": "",
                "$required": false,
                "_fc_id": "id_Frqpm0oykvxvdyc",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "itemtext",
                "title": "项目文本",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fzl4m0oylc6se0c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "moldtype",
                "title": "模具类别",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fnsgm0oylhece2c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              },
              {
                "type": "input",
                "field": "po_remark",
                "title": "采购备注",
                "info": "",
                "$required": false,
                "_fc_id": "id_Fiuhm0oylozfe4c",
                "name": "ref_Fhmam0oyamfrcmc",
                "display": true,
                "hidden": false,
                "_fc_drag_tag": "input"
              }
            ]
          },
          "_fc_id": "id_F32hm0oz4b3vecc",
          "name": "ref_Fh75m0oz4b3vedc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "group"
        }
      ]
    },
    "_fc_id": "id_Fq21m0oz1h3ne9c",
    "name": "ref_Fv46m0oz1h3neac",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  }
]);
  
  // 隐藏模态框的函数
  const hideModal = () => {
    showModal.value = false;
  };
  
  // 提交表单的函数
  const handleSubmit = async (data) => {
    console.log('提交的数据:', JSON.stringify(data, null, 2));
    try {
      const username = 'IT10';
      const password = '654321';
      const encodedCredentials = btoa(`${username}:${password}`);
      const response = await axios.post('/zjcpt/ZFM_JICAI_03?sap-client=700', data, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Basic ' + encodedCredentials
        }
      });
  
      // 调试信息
      console.log('接口返回完整响应:', response);
  
      // 处理接口的响应
      responseData.value = JSON.stringify(response.data, null, 2);
      statusCode.value = response.status;
      errorMessage.value = '';
      showModal.value = true; // 显示模态框
    } catch (error) {
      // 调试信息
      console.error('提交失败:', error);
  
      // 处理错误情况
      if (error.response) {
        console.log('错误响应:', error.response);
        responseData.value = JSON.stringify(error.response.data, null, 2);
        statusCode.value = error.response.status;
        errorMessage.value = error.response.data.message || '提交失败，请重试。';
      } else {
        responseData.value = '';
        statusCode.value = '';
        errorMessage.value = '提交失败，请重试。';
      }
      showModal.value = true; // 显示模态框
    }
  };
  </script>
  
  <style scoped>
  /* 样式可根据需要调整 */
  .response-message {
    margin-top: 20px;
    color: #409eff;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 600px; /* 适应屏幕宽度 */
    max-height: 80%; /* 适应屏幕高度 */
    overflow: auto; /* 添加滚动条 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  .modal-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
  }
  
  .modal-body {
    margin-top: 10px;
    color: #333;
    overflow-y: auto; /* 内部滚动条 */
  }
  
  .modal-body pre {
    white-space: pre-wrap; /* 保持换行 */
    word-break: break-word; /* 自动换行 */
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto;
  }
  
  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
  }
  
  .modal-close:hover {
    background: #e60000;
  }
  </style>
  